<template>
  <view class="page">
    <up-navbar :placeholder="true" :autoBack="false" leftIcon="">
      <template #center>
        <up-tabs :list="[
          { name: '关注', id: 0 },
          { name: '推荐', id: 1 }
        ]" :activeStyle="{ color: '#000', fontWeight: 'bold' }" lineColor="#9CB95A" :current="currentPage"
          @click="pageChange"></up-tabs>
      </template>
      <!-- #ifdef APP-PLUS -->
      <template #right>
        <view class="post-button" @click="openPage">
          <up-icon name="plus" color="white"></up-icon>
        </view>
      </template>
      <!-- #endif -->
    </up-navbar>
    <view class="main padding-0">
      <!-- 关注 -->
      <template v-if="currentPage == 0">
        <scroll-view scroll-y>
          <view v-for="(item, index) in followContentList" :key="index" class="bg-white radius margin-top-xl">
            <view class="flex align-center justify-between padding-lr" @click="toPerson(item.creatorId)">
              <view>
                <u-avatar size="36" :src="item.creatorAvatar
                  ? IMAGE_URL + item.creatorAvatar
                  : '/static/images/icon-avatar-default.png'
                  "></u-avatar>
              </view>
              <view class="margin-left-sm">
                <up-text size="12" :text="item.creatorName" color="#666666" margin="5px 0 0 0">
                </up-text>
                <up-text size="9" :text="item.timeAgo" color="#666666" margin="5px 0 0 0">
                </up-text>
              </view>
              <view class="text-left flex-sub">
                <text class="custom-tag">{{ item.userIdentity == 2 ? '家长' : '老师' }}</text>
              </view>
            </view>
            <view class="text-df margin-tb-sm padding-lr" @click="toDetail(item.id)">
              {{ item.content }}
            </view>
            <view v-if="item.images" class="padding-lr" @click="toDetail(item.id)">
              <u-album :rowCount="4" :urls="getUrls(item.images)"></u-album>
            </view>
            <view class="flex margin-tb-sm padding-lr">
              <view class="flex flex-sub justify-center">
                <!-- 已点赞 -->
                <up-icon size="24" color="#9cb95a" name="heart-fill" @click="cancelLike(item.id)" v-if="item.isLiked">
                </up-icon>
                <!-- 未点赞 -->
                <up-icon size="24" color="#B7B7B7" name="heart" @click="like(item.id)" v-else></up-icon>
              </view>
              <view class="flex flex-sub justify-center">
                <!-- 评论 -->
                <up-icon size="24" color="#B7B7B7" name="chat" customStyle="margin-left: 10rpx"
                  @click="todoComment(item.id)"></up-icon>
              </view>
              <view class="flex flex-sub justify-center">
                <up-icon size="24" color="#B7B7B7" name="share-square" customStyle="margin-left: 10rpx"
                  @click="sharePost(item.id)"></up-icon>
              </view>
            </view>
            <up-divider></up-divider>
          </view>
        </scroll-view>
      </template>
      <!-- 推荐 -->
      <template v-else>
        <up-tabs :list="themeType" lineHeight="0" :activeStyle="{ color: '#9CB95A' }" @click="changeTopic"></up-tabs>

        <scroll-view scroll-y>
          <view v-for="(item, index) in communityList" :key="index" class="bg-white radius margin-top-xl">
            <view class="flex align-center justify-between padding-lr" @click.stop="toPerson(item.creatorId)">
              <view>
                <u-avatar size="36" :src="item.creatorAvatar
                  ? IMAGE_URL + item.creatorAvatar
                  : '/static/images/icon-avatar-default.png'
                  "></u-avatar>
              </view>
              <view class="margin-left-sm">
                <up-text size="12" :text="item.creatorName" color="#666666">
                </up-text>
                <up-text size="9" :text="item.timeAgo" color="#666666" margin="5px 0 0 0">
                </up-text>
              </view>
              <view class="text-left flex-sub">
                <text class="custom-tag">{{ item.userIdentity == 2 ? '家长' : '老师' }}</text>
              </view>
              <!-- <view class="btn-follow disabled" v-if="item.isFollowing">
                <up-icon name="checkmark" size="12"></up-icon>
                <text class="margin-left-xxs">已关注</text>
              </view>
              <view class="btn-follow" v-else @click.stop="handleFollow(item.creatorId)">
                <up-icon name="plus" size="12"></up-icon>
                <text class="margin-left-xxs">关注</text>
              </view> -->
            </view>
            <view class="text-df margin-tb-sm padding-lr" @click.stop="toDetail(item.id)">
              {{ item.content }}
            </view>
            <view v-if="item.images" class="padding-lr" @click.stop="toDetail(item.id)">
              <u-album :rowCount="4" :urls="getUrls(item.images)"></u-album>
            </view>
            <view class="flex margin-tb-sm padding-lr">
              <view class="flex flex-sub justify-center">
                <!-- 已点赞 -->
                <up-icon size="24" color="#9cb95a" name="heart-fill" @click="cancelLike(item.id)" v-if="item.isLiked">
                </up-icon>
                <!-- 未点赞 -->
                <up-icon size="24" color="#B7B7B7" name="heart" @click="like(item.id)" v-else></up-icon>
              </view>
              <view class="flex flex-sub justify-center">
                <!-- 评论 -->
                <up-icon size="24" color="#B7B7B7" name="chat" customStyle="margin-left: 10rpx"
                  @click="todoComment(item.id)"></up-icon>
              </view>
              <view class="flex flex-sub justify-center">
                <up-icon size="24" color="#B7B7B7" name="share-square" customStyle="margin-left: 10rpx"
                  @click="sharePost(item.id)"></up-icon>
              </view>
            </view>
            <up-divider></up-divider>
          </view>
        </scroll-view>
        <!-- 浮动新增按钮 -->
        <!-- #ifdef MP -->
        <view class="float-button" @click.stop="openPage">
          <up-icon name="plus" color="white"></up-icon>
        </view>
        <!-- #endif -->
      </template>
    </view>
    <!-- 发表评论 -->
    <view class="footer flex bg-white" v-if="currentId">
      <view class="flex-sub">
        <up-input placeholder="评论" v-model="commentContent"></up-input>
      </view>
      <view class="margin-left-xs flex">
        <up-button type="primary" size="mini" text="发送" customStyle="width: 50px !important" :disabled="!commentContent"
          @click.stop="postComment"></up-button>
        <up-button size="mini" text="取消" customStyle="width: 50px !important;margin-left:10px"
          @click.stop="closeCommentPanel"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import {
  getCommunityApi,
  likeApi,
  cancelLikeApi,
  commentApi,
  getCommentApi,
  followAuthApi,
  getFollowContentApi
} from '@/api/community.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { IMAGE_URL } from '@/utils/env';
import { themeType } from '@/utils/constant';
// onLoad(() => {
//   getCommunity();
// });

onShow(() => {
  getCommunity();
  getFollowContent();
});

const communityList = ref([]); // 帖子内容
const currentId = ref(''); //当前选中的帖子ID，用户回复或转发时使用；
const commentContent = ref(''); //评论内容
const currentTopic = ref(0); //当前选中的话题
const currentPage = ref(1); //当前页码
const followContentList = ref([]); //关注内容
const getUrls = (images) => {
  if (!images) return [];
  return images.split(',').map((item) => IMAGE_URL + item);
};
// 内容列表
const getCommunity = async () => {
  const params = {
    topicId: currentTopic.value
  };
  const result = await getCommunityApi(params);
  if (result.code === 200) {
    communityList.value = result.rows;
    communityList.value.map(async (item) => {
      item.comments = await getComments(item.id);
    });
  }
};
const getFollowContent = async () => {
  const result = await getFollowContentApi();
  if (result.code === 200) {
    followContentList.value = result.rows;
  }
};
// 点赞
const like = async (id) => {
  const result = await likeApi(id);
  if (result.code === 200) {
    getCommunity();
    uni.$u.toast('点赞成功!');
  }
};
// 取消点赞
const cancelLike = async (id) => {
  const result = await cancelLikeApi(id);
  if (result.code === 200) {
    getCommunity();
    uni.$u.toast('取消成功!');
  }
};

// 准备评论
const todoComment = (id) => {
  currentId.value = id;
  uni.hideTabBar();
};
// 评论列表
const getComments = async (id) => {
  let comments = [];
  const result = await getCommentApi(id);
  if (result.code === 200) {
    comments = result.data;
  }
  return comments;
};
// 发送评论
const postComment = async () => {
  const params = {
    id: currentId.value,
    comment: commentContent.value
  };
  const result = await commentApi(params);
  if (result.code === 200) {
    uni.$u.toast('评论成功!');
    uni.showTabBar();
    currentId.value = 0;
    commentContent.value = '';
    getCommunity();
  }
};
// 关注作者
const handleFollow = async (id, index) => {
  const result = await followAuthApi(id);
  if (result.code === 200) {
    uni.showToast({
      title: '关注成功',
      icon: 'none'
    });
    communityList.value[index].isLiked = true;
  } else {
    uni.showToast({
      title: result.msg,
      icon: 'none'
    });
  }
};
// 转发
const sharePost = async (id) => {
  uni.navigateTo({
    url: '/pages/community/share?id=' + id
  });
};
// 关闭发表评论
const closeCommentPanel = () => {
  currentId.value = '';
  uni.showTabBar();
};
const openPage = () => {
  uni.navigateTo({
    url: '/pages/community/add'
  });
};
const toDetail = (id) => {
  uni.navigateTo({
    url: '/pages/community/content?id=' + id
  });
};
const toPerson = (id) => {
  uni.navigateTo({
    url: '/pages/community/person?id=' + id
  });
};
// 改变话题
const changeTopic = (item) => {
  console.log(item);
  currentTopic.value = item.id;
  getCommunity();
};
//改变关注 或 推荐
const pageChange = (e) => {
  currentPage.value = e.id;
};
</script>

<style lang="scss" scoped>
.page {
  background: #fffefa;
}

.expert-card {
  background: #f3f3f3;
  border-radius: 40rpx;
  padding: 8px;
  width: 50vw;
  margin-right: 20rpx;
  background: #fffefa;
}

.expert-card {
  background: #f3f3f3;
  border-radius: 40rpx;
  padding: 8px;
  width: 50vw;
  margin-right: 20rpx;
  display: inline-block;
}

.float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: radial-gradient(circle, #b7e54f 1%, #9cb95a 100%);
  width: 40px;
  height: 40px;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.post-button {
  background: radial-gradient(circle, #b7e54f 1%, #9cb95a 100%);
  width: 30px;
  height: 30px;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.custom-tag {
  background: #ffbbc2;
  color: #f64b5c;
  padding: 2px 5px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 5px;
  display: inline-block;
}

.btn-follow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px !important;
  line-height: 30px;
  background: rgba(153, 228, 88, 0.24);
  color: #6d9319;
  border-radius: 50rpx;
  font-size: 10px;
  border: solid 1px #6d9319;
  width: 50px;

  &.disabled {
    border: solid 1px #666;
    color: #666;
    background: white !important;
    width: 54px;
  }
}
</style>
